<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <base href="<%=basePath%>">
    
    <title>${ webpageTitle }</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<script src="rp/scripts/boot.js" type="text/javascript"></script>
	
	<style type="text/css">
	   	
    </style>
	
  </head>
  
  <body class="body-fit">
  	
  	<div style="width:100%;">
        <div class="mini-toolbar" style="padding:0px;border-top:0;border-left:0;border-right:0;">
            <table style="width:100%;">
                <tr>
                    <td style="width:100%;">
                        <a class="mini-button" onclick="addRow()"><i class="fa fa-plus fa-lg"></i> 新增</a>
                        <a class="mini-button" onclick="saveRows()"><i class="fa fa-floppy-o fa-lg"></i> 保存</a>
                        <a class="mini-button mini-button-danger" onclick="removeRow()"><i class="fa fa-trash-o fa-lg"></i> 删除</a>    
                        <a class="mini-button" onclick="exportMenu()"><i class="fa fa-sign-out fa-lg"></i> 导出</a>
						<a class="mini-button" onclick="importMenu()"><i class="fa fa-sign-in fa-lg"></i> 导入</a>
                    </td>
                    <td style="white-space:nowrap;">
                    	
                    </td>
                </tr>
            </table>           
        </div>
    </div>
    <div class="mini-fit">
	  	<div id="menuGrid" class="mini-datagrid" style="width: 100%; height: 100%;"
	    	url="rp/system/baseData/menuMng/getMenus" idField="id" allowResize="false" pageSize="20" borderStyle="border:0;"
	    	allowCellEdit="true" allowCellSelect="true" multiSelect="true" 
	        editNextOnEnterKey="true" editNextRowCell="true" allowCellValid="true"
	        oncellvalidation="onCellValidation">
		    <div property="columns">
		        <div type="indexcolumn" width="20" headerAlign="center">序号</div>
		        <div type="checkcolumn" width="20"></div>
		        <div name="name" field="name" vtype="required" width="120" headerAlign="center">
		        	菜单名称<input id="menuNameInput" property="editor" class="mini-textbox" style="width:100%;" 
		        		emptyText="必须输入英文字符，不能与其他菜单名称重复"/>
		        </div> 
		        <div name="iconCls" field="iconCls" width="60" headerAlign="center">
		        	图标<input property="editor" class="mini-textbox" style="width:100%;"/>
		        </div>
		        <div name="title" field="title" vtype="required" width="70" headerAlign="center">
		        	显示标题<input property="editor" class="mini-textbox" style="width:100%;"/>
		        </div> 
		        <div name="url" field="url" width="160" headerAlign="center">
		        	URL
		        	<input property="editor" class="mini-textarea" style="width:400px;" minWidth="200" minHeight="50" enabled="false"/>
		        </div> 
		        <div type="comboboxcolumn" autoShowPopup="true" 
		        	name="enabled2" field="enabled2" vtype="required" width="30" align="center" headerAlign="center" renderer="onShowRenderer">
		        	激活显示
	                <input property="editor" class="mini-combobox" style="width:100%;" data="enableds" />                
	            </div>
		        <div field="createDate" width="70" headerAlign="center" allowSort="true" renderer="onDateRenderer">
		        	创建日期
		        </div>                
		    </div>
		</div> 
	</div>
  	
	<script type="text/javascript">
		var grid;
		var enableds = [{ id:1, text:"激活"}, { id:0, text:"禁用"}];
	
		$(function(){
			mini.parse();
			grid = mini.get("menuGrid");
			grid.load();
		});
			
		function addRow() {         
            var newRow = { name: "", url: "rp/system/common/showOutlookMenu?menuName=" };
            grid.addRow(newRow, 0);
            grid.beginEditCell(newRow, "name");
        }
		
		function saveRows() {
			grid.validate();
			if (grid.isValid() == false) {
                var error = grid.getCellErrors()[0];
                grid.beginEditCell(error.record, error.column);
                return;
            }
			
            var data = grid.getChanges();
            var json = rp_encode(data);
            grid.loading("保存中，请稍等......");
            rp_ajax("rp/system/baseData/menuMng/saveMenus", {data: json}, function(result){
            	if(result == "success"){
	            	grid.reload();
            	}else{
            		grid.unmask();
	            	mini.alert(result);
            	}
            });
        }
		
		function removeRow(e){
			var rows = grid.getSelecteds();
   	        if(rows.length > 0){
	   	        mini.confirm("确定删除记录吗？", "友情提示",
	   	            function (action) {
	   	                if (action == "ok") {
	   	                	var json = rp_encode(rows);
	   	                    if (rows.length > 0) {
	   	                    	rp_ajax("rp/system/baseData/menuMng/deleteMenus", {data: json}, function(text){
	   	                    		grid.reload();
	   	                        });
	   	                    }
	   	                }
	   	            }
	   	        );
   	        }
		}
		
		function onShowRenderer(e){
			var value = e.value;
			if(value){
				if(value == "1") {
					return "<span style='color: green;'>已激活</span>"
				}
				return "<span style='color: red;'>未激活</span>";
			}
			return "";
		}
		
		function onCellValidation(e){
			if (e.field == "name"){
				var regex = /^[A-Za-z]+$/;  
	            if(!e.value.match(regex)){  
	            	e.isValid = false;
	            	e.errorText = "菜单名称必须输入英文字符";
	            }
            }
		}

		function exportMenu(){
			var rows = grid.getSelecteds();
			if(rows.length <= 0){
				mini.alert("请勾选需要导出的菜单");
				return false;
			}
   	        var json = rp_encode(rows);
			mini.open({
                url: "rp/common/exportData.jsp",
                title: "导出数据", 
                width: 800, 
                height: 355,
                showMaxButton: false,
                onload: function () {
                	var iframe = this.getIFrameEl();
                  	iframe.contentWindow.initTextarea(json);
                }
            });
		}

		function importMenu(){
			mini.open({
                url: "rp/common/importData.jsp",
                title: "导入数据", 
                width: 800, 
                height: 340,
                showMaxButton: false,
                onload: function() {
                	var iframe = this.getIFrameEl();
                  	iframe.contentWindow.initImportUrl("rp/system/baseData/menuMng/importMenu");
                },
                ondestroy: function() {
                    grid.reload();
                }
            });
		}
		
	</script>
  </body>
</html>
